import React from 'react';
import { ViewType } from '../../../types/room';
import type { ViewConfig } from '../../../types/room';
import styles from '../styles/ViewSwitcher.module.css';

interface ViewSwitcherProps {
  currentView: ViewType;
  onViewChange: (view: ViewType) => void;
  viewConfigs: Record<ViewType, ViewConfig>;
}

export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
  currentView,
  onViewChange,
  viewConfigs,
}) => {
  return (
    <div className={styles.viewSwitcher}>
      <div className={styles.label}>视图模式：</div>
      <div className={styles.buttonGroup}>
        {Object.values(ViewType).map(viewType => {
          const config = viewConfigs[viewType];
          const isActive = currentView === viewType;

          return (
            <button
              key={viewType}
              className={`${styles.viewButton} ${isActive ? styles.active : ''}`}
              onClick={() => onViewChange(viewType)}
              title={config.description}
            >
              <span className={styles.buttonText}>{config.title}</span>
              <span className={styles.buttonDesc}>{config.description}</span>
            </button>
          );
        })}
      </div>

      <div className={styles.currentViewInfo}>
        <span className={styles.infoLabel}>当前:</span>
        <span className={styles.infoValue}>
          {viewConfigs[currentView].title} - 显示
          {viewConfigs[currentView].dateRange}天
        </span>
      </div>
    </div>
  );
};

export default ViewSwitcher;
